<template>
  <swiper
    v-if="swipperDatas.length"
    :class="{
      'paginate-small': paginateSmall
    }"
    :options="options || swiperOption"
    v-bind="$attrs"
    @swiper="onSwiper"
    :lazy="true"
    @slideChange="onSlideChange"
    class="w-full h-full cps-swiper"
    :style="{
      height: height
    }"
  >
    <swiper-slide v-for="(src, index) in swipperDatas" :key="index">
      <slot :src="src" :record="src" :index="index">
        <div class="swiper-item flex items-center h-full w-full justify-center">
          <viewImg
            :src="src"
            :isCompress="1"
            :w="ossW || 800"
            :list-src="swipperDatas"
          >
          </viewImg>
        </div>
      </slot>
    </swiper-slide>
    <div class="swiper-pagination" slot="pagination"></div>
    <div class="swiper-button-prev" slot="button-prev"></div>
    <div class="swiper-button-next" slot="button-next"></div>
  </swiper>
</template>
<script>
import 'swiper/css/swiper.css'
import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
export default {
  name: 'CpsSwiper',
  data() {
    return {
      activeIndex: 0,
      swipperDatas: [],
      swiperOption: {
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev'
        }
      }
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  props: {
    items: {
      type: Array,
      default: () => []
    },
    paginateSmall: {
      type: Boolean,
      default: true
    },
    ossW: {
      type: Number,
      default: null
    },
    height: {
      type: [Number, String],
      default: null
    },
    options: {
      type: Object
    }
  },
  watch: {
    items: {
      handler(val) {
        this.swipperDatas = val
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    onSwiper(swiper) {
      this.$emits('onSwiper', swiper)
    },
    onSlideChange(swiper) {
      this.activeIndex = swiper.activeIndex
      this.$emits('slideChange', arguments)
    }
  }
}
</script>

<style>
.swiper-button-next.swiper-button-disabled,
.swiper-button-prev.swiper-button-disabled {
  opacity: 0.5;
  pointer-events: unset;
}
</style>
<style lang="less">
.cps-swiper {
  &.paginate-small {
    .swiper-button-next {
      right: 0;
    }
    .swiper-button-prev {
      left: 0;
    }
    .swiper-button-next,
    .swiper-button-prev {
      //   height: 35px;
      //   width: 20px;
      width: auto;
      &::after {
        color: #000;
        font-size: 14px;
      }
    }
  }
}
</style>
